<script setup lang="ts">
import DoctorCard from './DoctorCard.vue'
import { useWindowSize } from '@vueuse/core'
// 导入自定义hooks
import { useDocList } from '@/hooks'

// 1. 原生方式获取手机屏幕宽度
// const width = ref(0)
// onMounted(() => {
//   // 初始化，获取当前手机屏幕宽度
//   width.value = window.innerWidth
//   // 监听屏幕的变化，变化后需要重新赋值
//   window.addEventListener('resize', () => {
//     width.value = window.innerWidth
//   })
// })
// 2. 使用vue3插件vueuse/core
const { width } = useWindowSize()

// 3. 获取关注医生列表（5个）
const { docList } = useDocList()
// const docList = ref<DoctorList>([])
// const getDocList = async () => {
//   const res = await getDoctorPage({
//     current: 1, // 第一页
//     pageSize: 5 // 获取5条
//   })
//   console.log('关注医生列表：', res.rows)
//   docList.value = res.rows
// }
// onMounted(() => {
//   getDocList()
// })
</script>

<template>
  <div class="follow-doctor">
    <div className="head">
      <p>推荐关注</p>
      <a href="javascript:;"> 查看更多<i class="van-icon van-icon-arrow" /></a>
    </div>
    <div class="body">
      <!-- swipe 组件 
      width控制轮播图宽度，滑动一个医生的宽度
      show-indicators false 不显示指示点
      loop false 关闭无缝滑动
      
      问题：解决轮播图宽度适配
      1. 计算医生卡片宽度比率（百分比） = 150/375 =》0.4
      2. 获取手机屏幕的宽度
      最终，就可以获取，医生卡片在任何手机频幕下的宽度
      医生卡片宽度 = 医生卡片宽度比率 * 手机屏幕的宽度

      -->
      <van-swipe :width="0.4 * width" :show-indicators="false" :loop="false">
        <van-swipe-item v-for="item in docList" :key="item.id">
          <!-- doctor-card代表一个医生 -->
          <doctor-card :item="item" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.follow-doctor {
  background-color: var(--cp-bg);
  // height: 250px;
  padding-bottom: 20px;
  .head {
    display: flex;
    justify-content: space-between;
    height: 45px;
    align-items: center;
    padding: 0 15px;
    font-size: 13px;
    > a {
      color: var(--cp-tip);
    }
  }
  .body {
    width: 100%;
    overflow: hidden;
  }
}
</style>
